<template>
  <div>
    <div style="margin-bottom:20px;">
      <a-input-search
      placeholder="请输入用户账号"
      @search="onSearch"
      enterButton="搜索"
      :loading="searchLoading"
      v-model="searchText"
      style="width:220px;"
    />
    </div>
    <a-table :columns="columns" :dataSource="list" rowKey="id" :pagination="pagination" :loading="tableLoding" @change="handleTableChange">
      <template slot="name" slot-scope="text">{{ text }}</template>
    </a-table>
  </div>
    
</template>

<script>
import { getIntegralList } from '@/api/getData'

export default {
  name: 'IntegralList',
  components: {
   
  },
  data () {
    return {
        // 表头
        columns: [
            {
            title: '序号',
            dataIndex: 'id'
            },
            {
            title: '用户id',
            dataIndex: 'uid'
            },
            {
            title: '用户名',
            dataIndex: 'nickname'
            },
            {
            title: '手机',
            dataIndex: 'phone'
            },
            {
            title: '类型',
            dataIndex: 'type'
            },
            {
            title: '奖励积分',
            dataIndex: 'num'
            },
            {
            title: '创建时间',
            dataIndex: 'create_time'
            }
        ],
        list: [],
        pagination: {
            total: 0,
            current: 1,
            pageSize: 10
        },
        tableLoding: false,
        searchLoading: false,
        searchText: ''
    }
  },
  mounted () {
    this.initUserList()
  },
  methods: {
    initUserList(){
      this.tableLoding = true
      getIntegralList(this.pagination.current,this.pagination.pageSize,this.searchText).then(res=>{
          console.log(res)
          this.list = res.data.list
          this.pagination.total = res.data.total
      }).finally(e=>{
        this.tableLoding = false
        this.searchLoading = false
        this.searchText = ''
      })
    },
    handleTableChange(pagination) {
      console.log(pagination)
      const pager = { ...this.pagination };
      pager.current = pagination.current;
      this.pagination = pager;
      this.initUserList()
    },
    onSearch(){
      this.searchLoading = true
      this.initUserList()
    }
  }
}
</script>

<style scoped>
.user_avatar{
  width: 44px;
  height: 44px;
  border-radius: 50%;
}
.user_btn{
  background:#fff;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
}
</style>
